<template>
    <view class="h-screen bg-white relative overflow-hidden">
        <!-- 高端状态栏 -->
        <view
            class="flex justify-between items-center px-5 py-2 bg-transparent text-sm font-semibold h-11 relative z-10"
            style="padding-top: calc(8px + var(--status-bar-height));">
            <view class="status-left flex items-center">
                <text class="premium-time mr-1">{{ currentTime }}</text>
                <text class="premium-date text-xs opacity-70">{{ currentDay }}</text>
            </view>
            <view class="status-center flex items-center justify-center">
                <view
                    class="brand-logo w-6 h-6 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center text-white font-bold">
                    E
                </view>
            </view>
            <view class="flex gap-1 items-center">
                <text class="iconfont icon-signal text-xs opacity-90 ml-1"></text>
                <text class="iconfont icon-wifi text-xs opacity-90 ml-1"></text>
                <text class="iconfont icon-battery text-xs opacity-90 ml-1"></text>
            </view>
        </view>

        <!-- 背景装饰 -->
        <view class="absolute inset-0 z-0 overflow-hidden">
            <view class="bg-gradient-primary absolute top-0 left-0 w-full h-third opacity-20"
                style="background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);"></view>
            <view class="bg-particles">
                <view v-for="(_, i) in 5" :key="i" class="particle absolute rounded-full bg-indigo-200 opacity-30"
                    :style="{
                        width: `${20 + Math.random() * 30}px`,
                        height: `${20 + Math.random() * 30}px`,
                        top: `${Math.random() * 100}%`,
                        left: `${Math.random() * 100}%`,
                        animationDelay: `${Math.random() * 5}s`,
                        animationDuration: `${15 + Math.random() * 15}s`
                    }"></view>
            </view>
            <view class="bg-mesh absolute inset-0 opacity-10">
                <view class="mesh-gradient"></view>
            </view>
        </view>

        <!-- 主内容区域 -->
        <scroll-view scroll-y class="h-full pt-2 pb-16"
            style="height: calc(100vh - var(--status-bar-height) - 44px - 60px);">
            <!-- 高级项目管理页面 -->
            <view class="premium-page px-5">
                <view class="luxury-header flex justify-between items-center mb-6">
                    <view class="premium-greeting">
                        <view class="greeting-container">
                            <view class="luxury-title">
                                <text class="text-2xl font-bold text-slate-800 block">项目管理</text>
                            </view>
                            <text class="text-sm text-slate-500 mt-1">精准掌控任务进度</text>
                        </view>
                    </view>
                    <button
                        class="premium-header-btn w-10 h-10 rounded-full bg-indigo-500 flex items-center justify-center shadow-sm"
                        @tap="addProject">
                        <view class="btn-glow absolute inset-0 bg-indigo-300 opacity-30 rounded-full blur-sm"></view>
                        <text class="iconfont icon-plus text-white"></text>
                    </button>
                </view>

                <!-- 高级筛选标签 -->
                <scroll-view scroll-x class="luxury-filter-tabs whitespace-nowrap -mx-5 px-5 mb-6">
                    <view class="inline-block" v-for="(tab, index) in filterTabs" :key="index">
                        <button class="luxury-filter-tab relative py-2 px-4 mr-3 text-sm font-medium rounded-full"
                            :class="activeTab === tab.id ? 'bg-indigo-500 text-white' : 'bg-slate-100 text-slate-600'"
                            @tap="setActiveTab(tab.id)">
                            <text>{{ tab.name }}</text>
                            <view v-if="activeTab === tab.id"
                                class="tab-glow absolute inset-0 bg-indigo-300 opacity-30 rounded-full blur-sm"></view>
                        </button>
                    </view>
                </scroll-view>

                <!-- 精英软件项目 -->
                <view class="luxury-projects-section mb-8">
                    <view class="premium-section-header flex items-center mb-4">
                        <view
                            class="section-icon w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
                            <text class="iconfont icon-laptop-code text-indigo-600"></text>
                        </view>
                        <text class="section-title text-lg font-bold text-slate-800">软件项目</text>
                    </view>

                    <view class="luxury-project-list">
                        <view v-for="(project, index) in filteredProjects" :key="index"
                            class="premium-project-card relative rounded-xl overflow-hidden border border-slate-100 shadow-sm bg-white"
                            @tap="openProjectDetail(project.id)">
                            <view class="project-backdrop absolute inset-0 opacity-5"></view>
                            <view class="project-surface p-4 relative z-10">
                                <view class="project-header-luxury flex justify-between items-center mb-2">
                                    <view class="project-info-luxury">
                                        <text class="project-title text-base font-medium text-slate-800">{{
                                            project.title }}</text>
                                        <view class="project-tags-luxury flex mt-1">
                                            <text v-for="(tag, tagIndex) in project.tags" :key="tagIndex"
                                                class="luxury-tag text-xs px-2 py-half rounded-full mr-2"
                                                :class="getTagClass(tag)">
                                                {{ tag }}
                                            </text>
                                        </view>
                                    </view>
                                    <view class="project-status-luxury text-xs px-2 py-1 rounded-full"
                                        :class="getStatusClass(project.status)">
                                        {{ project.status }}
                                    </view>
                                </view>
                                <text class="project-desc-luxury text-sm text-slate-600 mb-3">{{ project.description
                                    }}</text>
                                <view class="project-footer-luxury flex justify-between items-center">
                                    <view class="project-progress-luxury flex-1 mr-4">
                                        <view class="progress-track h-1-5 bg-slate-100 rounded-full overflow-hidden">
                                            <view class="progress-fill-luxury h-full rounded-full"
                                                :class="project.progress === 100 ? 'bg-green-500' : 'bg-indigo-500'"
                                                :style="{ width: project.progress + '%' }"></view>
                                        </view>
                                        <text class="progress-percentage text-xs text-slate-500 mt-1">{{
                                            project.progress }}%</text>
                                    </view>
                                    <button
                                        class="project-more-btn w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center"
                                        @tap.stop="showProjectOptions(project.id)">
                                        <text class="iconfont icon-more-horizontal text-slate-500"></text>
                                    </button>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>

        <!-- 底部导航栏 -->
        <view
            class="fixed bottom-0 left-0 right-0 h-16 bg-white bg-opacity-80 border-t border-slate-100 shadow-sm z-50">
            <view class="flex h-full">
                <navigator url="/pages/index/index" open-type="switchTab"
                    class="flex-1 flex flex-col items-center justify-center">
                    <view class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mb-half">
                        <text class="iconfont icon-home text-slate-500"></text>
                    </view>
                    <text class="text-xs font-medium text-slate-500">首页</text>
                </navigator>
                <navigator url="/pages/projects/index" open-type="switchTab"
                    class="flex-1 flex flex-col items-center justify-center">
                    <view class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mb-half">
                        <text class="iconfont icon-briefcase text-indigo-600"></text>
                    </view>
                    <text class="text-xs font-medium text-indigo-600">项目</text>
                </navigator>
                <navigator url="/pages/profile/index" open-type="switchTab"
                    class="flex-1 flex flex-col items-center justify-center">
                    <view class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center mb-half">
                        <text class="iconfont icon-user-circle text-slate-500"></text>
                    </view>
                    <text class="text-xs font-medium text-slate-500">我的</text>
                </navigator>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';

// 时间相关
const currentTime = ref('');
const currentDay = ref('');

// 更新时间
const updateTime = () => {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    currentTime.value = `${hours}:${minutes}`;

    const days = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
    currentDay.value = days[now.getDay()];
};

// 筛选标签
const filterTabs = ref([
    { id: 'all', name: '全部' },
    { id: 'in-progress', name: '进行中' },
    { id: 'completed', name: '已完成' },
    { id: 'planned', name: '计划中' }
]);
const activeTab = ref('all');

// 设置活动标签
const setActiveTab = (tabId: string) => {
    activeTab.value = tabId;
};

// 项目数据
const projects = ref([
    {
        id: 1,
        title: '生活管理精英版',
        description: '全新高端生活管理平台',
        tags: ['前端', 'JS'],
        status: '进行中',
        progress: 75
    },
    {
        id: 2,
        title: '精品电商重构',
        description: '高性能现代化电商体验',
        tags: ['React', 'TS'],
        status: '已完成',
        progress: 100
    },
    {
        id: 3,
        title: '智能家居控制',
        description: '多平台智能家居管理系统',
        tags: ['Vue', 'IoT'],
        status: '计划中',
        progress: 15
    }
]);

// 根据活动标签筛选项目
const filteredProjects = computed(() => {
    if (activeTab.value === 'all') {
        return projects.value;
    }

    const statusMap: Record<string, string> = {
        'in-progress': '进行中',
        'completed': '已完成',
        'planned': '计划中'
    };

    return projects.value.filter(project => project.status === statusMap[activeTab.value]);
});

// 获取标签样式类
const getTagClass = (tag: string) => {
    const tagClasses: Record<string, string> = {
        '前端': 'bg-blue-100 text-blue-600',
        'JS': 'bg-yellow-100 text-yellow-600',
        'React': 'bg-cyan-100 text-cyan-600',
        'TS': 'bg-blue-100 text-blue-600',
        'Vue': 'bg-green-100 text-green-600',
        'IoT': 'bg-purple-100 text-purple-600'
    };

    return tagClasses[tag] || 'bg-slate-100 text-slate-600';
};

// 获取状态样式类
const getStatusClass = (status: string) => {
    const statusClasses: Record<string, string> = {
        '进行中': 'bg-amber-100 text-amber-600',
        '已完成': 'bg-green-100 text-green-600',
        '计划中': 'bg-blue-100 text-blue-600'
    };

    return statusClasses[status] || 'bg-slate-100 text-slate-600';
};

// 打开项目详情
const openProjectDetail = (projectId: number) => {
    uni.navigateTo({
        url: `/subPages/project/detail?id=${projectId}`
    });
};

// 显示项目选项
const showProjectOptions = (projectId: number) => {
    uni.showActionSheet({
        itemList: ['编辑项目', '分享项目', '删除项目'],
        success: (res) => {
            switch (res.tapIndex) {
                case 0:
                    uni.navigateTo({ url: `/subPages/project/edit?id=${projectId}` });
                    break;
                case 1:
                    uni.showToast({ title: '分享功能开发中', icon: 'none' });
                    break;
                case 2:
                    uni.showModal({
                        title: '确认删除',
                        content: '确定要删除此项目吗？此操作不可撤销。',
                        success: (res) => {
                            if (res.confirm) {
                                deleteProject(projectId);
                            }
                        }
                    });
                    break;
            }
        }
    });
};

// 删除项目
const deleteProject = (projectId: number) => {
    projects.value = projects.value.filter(project => project.id !== projectId);
    uni.showToast({ title: '项目已删除', icon: 'success' });
};

// 添加新项目
const addProject = () => {
    uni.navigateTo({
        url: '/subPages/project/add'
    });
};

// 定时器
let timer: number;

onMounted(() => {
    updateTime();
    timer = setInterval(updateTime, 60000) as unknown as number;
});

onUnmounted(() => {
    clearInterval(timer);
});
</script>

<style>
/* 浮动粒子动画 */
.particle {
    animation: floatParticle 15s infinite ease-in-out;
}

@keyframes floatParticle {

    0%,
    100% {
        transform: translateY(0) translateX(0);
    }

    25% {
        transform: translateY(-30px) translateX(20px);
    }

    50% {
        transform: translateY(-15px) translateX(-20px);
    }

    75% {
        transform: translateY(30px) translateX(10px);
    }
}
</style>